<template>
 <div class="add-area">
   <div class="text"><el-icon><Tickets /></el-icon><span>数据列表</span></div>
   <el-button @click="add(parseInt(route.query.flashPromotionId as string),parseInt(route.query.flashPromotionSessionId as string))">添加</el-button>
 </div>
<el-table
ref="multipleTableRef"
:data="list"
style="width: 100%"
border 
@selection-change=""
cell-class-name="align-c"
>
<el-table-column label="编号" prop="id" align="center"/>
<el-table-column label="商品名称" >
  <template #default="{row}">
    <div>
      {{ row.product.name }}
    </div>
  </template>
</el-table-column>
<el-table-column label="货号" prop="productSn" >
  <template #default="{row}">
    <div>
      No.{{ row.product.productSn }}
    </div>
  </template>
</el-table-column>
<el-table-column label="商品价格">
  <template #default="{row}">
    <div>
      ￥{{ row.product.price }}
    </div>
  </template>
</el-table-column>
<el-table-column label="剩余数量" prop="stock" >
  <template #default="{row}">
    <div>
      {{ row.product.stock }}
    </div>
  </template>
</el-table-column>
<el-table-column label="秒杀价格" prop="flashPromotionPrice" >
  <template #default="{row}">
    <div>
      ￥{{ row.flashPromotionPrice }}
    </div>
  </template>
</el-table-column>
<el-table-column label="秒杀数量" prop="flashPromotionCount" />
<el-table-column label="限购数量" prop="flashPromotionLimit" />
<el-table-column label="排序" align="center">
  <template #default="{row}">
    <div>
      {{ row.sort }}
    </div>
  </template>
</el-table-column>
<el-table-column label="操作" width="200px">
   <template #default="{ row }">
    <el-button text type="primary" @click="edit(row.id,row.product.name,row.product.productSn,row.product.stock,row.product.price)" size="small">编辑</el-button>
    <el-button text type="primary" @click="del(row.id)"  size="small">删除</el-button>
   </template>
 </el-table-column>
</el-table>

<div class="page">
  <div class="left">
<span class="pad-left">

</span>
</div>
 <ElConfigProvider :locale="zhCn">
   <div class="">
     <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
       :page-sizes="[5, 10, 20, 50]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
       @size-change="queryUserList" @current-change="queryUserList" />
   </div>
  </ElConfigProvider>
</div>
<addFlashProductRelationCreate :show="showDialog" @hide="closeDialog" :id="editId" :flashPromotionId="addFlashPromotionId" :flashPromotionSessionId="addFlashPromotionSessionId"/>
<editFlashProductRelation :show="showEdit" @hide="closeDialog" :id="editId" :name="editName" :stock="editStock" :productSn="editProductSn" :price="editPrice"/>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { getFlashProductRelationList,SwitchRecommendStatus,delFlashProductRelation } from "./api";
import { Search,Tickets } from "@element-plus/icons-vue"
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { useRoute } from "vue-router";
import addFlashProductRelationCreate from './addFlashProductRelationCreate.vue'
import editFlashProductRelation from './editFlashProductRelation.vue'


const addFlashPromotionId=ref(0)
const addFlashPromotionSessionId=ref(0)
const addProductId=ref(0)
const add=(flashPromotionId:number,flashPromotionSessionId:number)=>{
  showDialog.value = true
  console.log(route.query);
  addFlashPromotionId.value=parseInt(route.query.flashPromotionId as string)
  addFlashPromotionSessionId.value=parseInt(route.query.flashPromotionSessionId as string)
  queryUserList()
}
const route=useRoute()
const editName=ref('')
const editStock=ref(0)
const editId = ref(0);
const editPrice=ref(0)
const editProductSn = ref(0);
const edit=(id:number,name:string,productSn:number,stock:number,price:number)=>{
    editId.value = id;
    editName.value=name
    editStock.value=stock
    editProductSn.value=productSn
    editPrice.value=price
    showEdit.value = true;
}

const del=(id:number)=>{
    ElMessageBox.confirm("是否要删除该活动?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        delFlashProductRelation(id).then((res) => {
          if (res.code === 200) {
            ElMessage.success("删除成功");
            queryUserList()
          }
        });
      })
      .catch(() => {});
  }
const showEdit=ref(false)

const showDialog = ref(false);
  const closeDialog = (isReload?: boolean) => {
    showDialog.value = false;
    showEdit.value = false;
    if (isReload) queryUserList();
};

const switchStatue=(row:any)=>{
  ElMessageBox.confirm("是否要修改该状态??", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        SwitchRecommendStatus(row.id!,row.recommendStatus).then((res)=>{
      if(res.code===200){
        ElMessage.success("修改成功")
      }else{
        row.recommendStatus= row.recommendStatus===1?0:1
      }
    }).catch(()=>{
      row.recommendStatus= row.recommendStatus===1?0:1
    })
      })
      .catch(() => {
        ElMessage('取消操作')
        row.recommendStatus= row.recommendStatus===1?0:1
      });
  }



const queryParams = reactive<BrandListParams>({
pageNum: 1,
pageSize: 5,
total:0
})


const list = ref<any>([]);
const total = ref(0)

const queryUserList = () => {
  getFlashProductRelationList(parseInt(route.query.flashPromotionId as string),parseInt(route.query.flashPromotionSessionId as string),queryParams).then((res) => {

    console.log(res.data);
  
    list.value = res.data.list
    total.value = res.data.total
    console.log(res.data.total);
    
    
 });
};
queryUserList()
</script>
<style lang="less" scoped>
.searchj-box {
 box-shadow: 0 0 4px #ccc;
 border-radius: 10px;
 padding: 20px;
 margin-bottom: 20px;
 .Search-criteria{
     display: flex;
 }

 .row {
   padding: 20px 0;
  display: flex;


   &:first-child {
     justify-content: space-between;
   }

   &:last-child {
     width: 400px;

     span {
       width: 100px;
     }
   }
 }
}

.page {
 padding: 30px;
 display: flex;
 justify-content: space-between;
 .pad-left{
  margin-left: 15px;
 }
}

:deep(.align-c) {
 .cell {
   text-align: center !important;
 }
}
.add-area {
 display: flex;
 justify-content: space-between;
 padding: 20px;
 margin-bottom: 20px;
 box-shadow: 0 0 4px #ccc;
 border-radius: 10px;
 .text{
   display: flex;
   align-items: center;
   span{
     padding-left: 10px;
   }
 }
}
</style>
